<template>
	<div>
	<div class="mine_information" v-bind:style="{height:pageHeight/64+'rem'}">
		<!--头部begin-->
		<div class="information_head">
			<router-link to="/mine/"><i class="information_head_down"></i></router-link>
			<span class="information_head_str">个人资料</span>
		</div>
		<!--头部end-->
		<div class="information_container">
			<div class="personal_top">
				<ul>
					<li>
						<span>头像</span>
						<img :src="mydetail&&mydetail.headPic"/>
						<span></span>
					</li>
					<li>
						<router-link to="/mine/information/name">
						<span>昵称</span>
						<span>{{mydetail&&mydetail.nickName}}</span>
						</router-link>
					</li>
					<li>
						<span>偶粉号</span>
						<span>{{mydetail&&mydetail.ofansID}}</span>
					</li>
					<li>
						<span>手机号</span>
						<span>{{mydetail&&mydetail.phone}}</span>
					</li>
				</ul>
			</div>
			<div class="personal_bottom">
				<ul>
					<li v-on:click="popup" class="sex">
						<span>性别</span>
						<span>{{mydetail&&mydetail.sex}}</span>
					</li>
					<!--@click="GPS"-->
					<li>
						<router-link to="/mine/information/region">
						<span>地区</span>
						<span></span>
						</router-link>
					</li>
					<li>
						<router-link to="/mine/information/sign">
						<span>个性签名</span>
						<span>{{mydetail&&mydetail.personsign}}</span>
						</router-link>
					</li>
				</ul>
			</div>
		</div>
		<!--点击弹框begin-->
		<div class="popup_cover" v-show="show">
			<div class="attestation">
				<div class="cover">
					<div class="star" @click="changeFemale" v-bind:class="female?'bg':'normal'">女</div>
					<div class="producer" @click="changeMale" v-bind:class="male?'bg2':'normal2'">男</div>
				</div>
				<div class="btn" @click="cancel">
					取消
				</div>
			</div>
		</div>
		<!--点击弹框end-->
	</div>
	</div>
</template>

<script>
    import $ from "jquery";
	export default {
		name:"mine_information",
		data(){
			return {
				pageHeight:document.documentElement.clientHeight,
				show:false,
				cityGPS:"上海",
				female:false,
				male:false,
				mydetail:{
					id:0,
					headPic:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503418157954&di=3091582d14814260d537baf030181d45&imgtype=0&src=http%3A%2F%2Fimg.qqzhi.com%2Fupload%2Fimg_4_1833587028D3067586516_21.jpg",
					nickName:"正在加载",
					ofansID:"正在加载",
					twocode:"正在加载",
					phone:"正在加载",
					sex:"正在加载",
					userPicList:[
						"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2600862994,2565094368&fm=117&gp=0.jpg",
						"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=523024675,1399288021&fm=117&gp=0.jpg",
						"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2182925329,386985427&fm=117&gp=0.jpg"
					],
					personsign:"用简短的一句话介绍自己，让更多人认识",
					city:"北京 朝阳区"
				}
			}
		},
		methods:{
			popup(event){
				this.show = !this.show;
                var sexval = $('.sex span').eq(1).html();
                if(sexval=="女"){
                	this.female = true;
                }else{
                	this.male = true;
                }
				
			},
			cancel(event){
				this.show = !this.show;
			},
			changeFemale(){
				$('.sex span').eq(1).html('女');
				this.show = !this.show;
				this.male = false;
			},
			changeMale(){
				$('.sex span').eq(1).html('男');
				this.show = !this.show;
				this.female = false;
			},
			GPS(){
			 new BMap.LocalCity().get(function (r) { //定位城市  
				console.log(r);
			 	this.cityGPS=r.name;
			 	console.log(cityGPS);
		 	  })
			}
		},
		created(){
			var $this =this;
			this.$axios.get('http://127.0.0.1:3000/mine/mydetail?id='+'08220003').then(res=>{
				$this.mydetail = res.data;
			})	
		}
	}

</script>

<style scoped lang="less">
.mine_information{
    background: #f2eef9;
    width: 640/64rem;
    overflow: hidden;
    position: relative;
    .information_head{
        width:640/64rem;
        margin:0 auto;
        height:130/64rem;
        text-align:center;
        padding-top:68/64rem;
        box-sizing: border-box;
        background: #A54BE8;
        .information_head_str{
            font-size:36/64rem;
            color:#fff;
            display: inline-block;
            margin-left: -55/64rem;
            margin-top: -10/64rem;
        }
        .information_head_down{
            float:left;
            display:inline_block;
            background: url(../../../static/images/4/f-1.png) no-repeat;
            background-size:100% 100%;
            width:20/64rem;
            height:35/64rem;
            line-height:35/64rem;
            margin-left: 37/64rem;
        }
    }
}
.information_container{
    background: #f2eef9;
    .personal_top{
        background: url(../../../static/images/58/personal_bg_2.png) no-repeat;
        background-size: 100% 100%;
        margin: 30/64rem 0;
        padding: 0 30/64rem ;
        /*#woyun{
        	color:red ;
        	font-size: 30/64rem;
        }*/
        ul{
            li:first-child{
                height: 130/64rem;
                line-height:130/64rem;
                img{
                    width: 82/64rem;
                    height: 82/64rem;
                    vertical-align: middle;
                    /*padding-top: 25/64rem;*/
                    margin-left: 349/64rem;
                }
                span:last-child{
                    margin-top: (130-25)/2/64rem;
                    width: 15/64rem;
                    height:  25/64rem;
                }
            }
            li{
                height: 90/64rem;
                line-height: 90/64rem;
                color: #1b1b1b;
                font-size: 36/64rem;
                padding: 0 10/64rem;
                border-bottom: 1px solid #d7d2e0;
                span:last-child{
                   background: url(../../../static/images/29-30-34/插入箭头.png) no-repeat right center;
                   background-size: 15/64rem 25/64rem;
                   display: inline-block;
                   float: right;
                   padding-right: 31/64rem;
                   color: #707070;
                   font-size: 28/64rem;
                }
                span:first-child{
                	font-size: 30/64rem;
                	color: #1B1B1B;
                }
            }
            
        }
    }
    .personal_bottom{
        background: url(../../../static/images/58/personal_bg_1.png) no-repeat;
        background-size: 100% 100%;
        margin: 40/64rem 0;
        height: 330/64rem;
        padding: 0 30/64rem ;
        ul{
            li{
                box-sizing: border-box;
                height: 90/64rem;
                padding: 32/64rem 10/64rem;
                color: #1b1b1b;
                font-size: 36/64rem;
                border-bottom: 1px solid #d7d2e0;
                span:last-child{
                   background: url(../../../static/images/29-30-34/插入箭头.png) no-repeat right center;
                   background-size: 15/64rem 25/64rem;
                   display: inline-block;
                   float: right;
                   padding-right: 31/64rem;
                   color: #707070;
                   font-size: 28/64rem;
                }
                span:first-child{
                	font-size: 30/64rem;
                	color: #1B1B1B;
                }
            }
            li:last-child{
                padding-top: 37/64rem;
                height: 90/64rem;
                border-bottom: 0px solid #d7d2e0;
               /* span{
                    padding-top: 50/64rem;
                    display: inline-block;
                 	 height: 60/64rem;
                 	 color: #1B1B1B;
                }*/
                span:last-child{
                    width: 370/64rem;
                    /*height: 65/64rem;*/
                   background: url(../../../static/images/29-30-34/插入箭头.png) no-repeat right center ;
                   background-size: 15/64rem 25/64rem;
                   display: inline-block;
                   float: right;
                   padding-right: 31/64rem;
                   color: #707070;
                   font-size: 28/64rem;
                   text-overflow: ellipsis;
                   overflow: hidden;
                }
            }
        }
    }
}

.popup_cover{
    width: 100%;
    position: absolute;
    top: 0;
    height: 100%;
    z-index: 100;
    background: url(../../../static/images/48/弹出半透明.png) no-repeat bottom;
   	background-size: 100% 100%;
    .attestation{
        position: fixed;
        bottom: 20/64rem;
        left: 20/64rem;
        z-index: 120;
        .cover{
            background: url(../../../static/images/48/弹出底.png);
            background-size: 100% 100%;
            width: 600/64rem;
            height: 197/64rem;
            margin-bottom: 12/64rem;
            .star,.producer{
                float: left;
                width: 50%;
                height: 100%;
                text-align: center;
                padding-top: 140/64rem;
                font-size: 30/64rem;
                box-sizing: border-box;
                color: #434343;
            }
            .normal{
            	background: url(../../../static/images/66/1-1.png) no-repeat 50% 24/64rem;
            }
            .bg{
            	background: url(../../../static/images/66/1-2.png) no-repeat 50% 24/64rem;
            }
            .star{
                background-size: 100/64rem;
            }
            .normal2{
                background: url(../../../static/images/66/2-1.png) no-repeat 50% 24/64rem;
            }
            .bg2{
                background: url(../../../static/images/66/2-2.png) no-repeat 50% 24/64rem;
            }
            .producer{
           		background-size: 100/64rem;
           }
        }
        .btn{
            background: url(../../../static/images/48/弹出底.png);
            background-size: 100% 100%;
            width: 600/64rem;
            height: 90/64rem;
            color: #a54be8;
            font-size: 36/64rem;
            text-align: center;
            line-height: 90/64rem;
        }
    }

}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
body,
p,
ul,
ol,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
}
body{
	line-height: 0;
}
input,
textarea,
select {
	padding: 0;
	border: 1px solid #ccc;
	outline: 0;
	font-size: 100%;
}

i {
	font-style: normal;
}

b {
	font-weight: normal;
}

ul,
ol {
	padding-left: 0;
	list-style: none;
}

a {
	text-decoration: none;
}

a,
img {
	-webkit-user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.wrap{
	width: 1000px;
	margin: 0 auto;
}
.clearfix:after {
	content: "";
	display: block;
	height: 0;
	overflow: hidden;
	clear: both;
}
body{
	font-family: "微软雅黑";
}
</style>